<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
    <style type="text/css">
        .video-js{
            width: 100%;
        }
    </style>
</head>
<body>

<!-- vjs-big-play-centered可使大的播放按钮居住，vjs-fluid可使视频占满容器 -->
<video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid">
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">
            supports HTML5 video
        </a>
    </p>
</video>
<script type="text/javascript">
    function getQuery(name) {

        let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

        let r= window.location.search.substr(1).match(reg);

        console.log(r);if(r != null) {//对参数值进行解码

            return decodeURIComponent(r[2]);

        }return null;

    }
    document.title=getQuery('title')
    var player = videojs(document.getElementById('myVideo'), {
        controls: true, // 是否显示控制条
        preload: 'auto',
        autoplay: true,
        poster: 'static/images/back.jpg',
        fluid: true, // 自适应宽高
        language: 'zh-CN', // 设置语言
        muted: false, // 是否静音
        inactivityTimeout: false,
        controlBar:{
            playToggle:false
        },
        sources:[ // 视频源
            {
                src: getQuery('videoUrl'),
                poster: 'static/images/back.jpg'
            }
        ]
    }, function (){
        this.play();
        console.log('视频可以播放了',this);
    });
    console.log(getQuery('videoUrl'),'videoUrlvideoUrlvideoUrl')
</script>
</body>
</html>
